<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="counter">
        Counter: {{ counter }}
        <button @click="stopCounter" title="stop button">Stop counter</button>

        <p>
            <span v-once>这个将不会改变: {{ message }}</span>
        </p>

        <p>
            <div id="bind-attribute">
                <span v-bind:title="message">
                    鼠标悬停几秒钟查看此处动态绑定的提示信息！
                </span>
            </div>
        </p>
        <p>
            <span title="message span">鼠标悬停几秒钟查看</span>
        </p>
        <p title="message p">
            <h3 title="message h3">鼠标悬停几秒钟查看</h3>
        </p>

        <div id="list-rendering">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <p>
            <ol>
                <todo 
                    v-for="item in 3" 
                    v-bind:key="item" 
                    v-bind:msg="item">
                </todo>
            </ol>
        </p>
        <div id="todo-list-app">
            <ol>
                <todo-item 
                    v-for="item in groceryList" 
                    v-bind:todo="item" 
                    v-bind:key="item.id">
                </todo-item>
            </ol>
        </div>
    </div>

    <script>
        const Counter = {
            data() {
                return {
                    counter: 0,
                    timer: null,
                    message: 'You loaded this page on ' + new Date().toLocaleString(),
                    todos: [{
                            text: 'Learn JavaScript'
                        },
                        {
                            text: 'Learn Vue'
                        },
                        {
                            text: 'Build something awesome'
                        }
                    ],
                    groceryList: [{
                            id: 0,
                            text: 'Vegetables'
                        },
                        {
                            id: 1,
                            text: 'Cheese'
                        },
                        {
                            id: 2,
                            text: 'Whatever else humans are supposed to eat'
                        }
                    ]
                }
            },
            mounted() {
                const vm = this
                this.timer = setInterval(() => {
                    this.counter++
                    if (this.counter > 10) {
                        this.stopCounter()
                    }
                    vm.message = 'Change message: ' + new Date().toLocaleString()
                }, 1000)
            },
            methods: {
                stopCounter() {
                    clearInterval(this.timer)
                }
            }
        }

        const app = Vue.createApp(Counter)
        app.component('todo', {
            props: ['msg'],
            template: `<li>The {{ msg }} message.</li>`
        })
        app.component('todo-item', {
            props: ['todo'],
            template: `<li>{{ todo && todo.text }}</li>`
        })
        app.mount('#counter')
    </script>
</body>

</html>